<template>
  <div class="NavBar">
    <div class="top">
      <div class="title" @click.self="goHome">{{ title }}</div>
      <div class="bgborder">
        <img src="@/assets/common/topbg1.png" alt="" />
      </div>
      <div class="nav">
        <div v-for="item in navList" :key="item.value" class="navItem" :class="{ active: activeNav === item.value }" @click="onClickNav(item.value)">
          {{ item.title }}
        </div>
      </div>
    </div>
    <div v-if="iscountry" class="country">
      <div class="icon">
        <img src="@/assets/common/location.png" alt="" />
      </div>
      <div class="query">
        <CountySelect></CountySelect>
      </div>
    </div>
    <div class="img" v-if="isimg">
      <div class="icon">
        <img src="@/assets/common/title.png" alt="" />
      </div>
    </div>
    <div class="sw" v-if="issw">实景三维模型</div>
    <div class="date" v-if="isDate">{{ getTime }}</div>
    <div class="weather" v-if="isWeather">
      <img src="@/assets/common/tq.png" alt="" />
      <span>&nbsp;16~20.C</span>
    </div>
    <div v-if="btmList && Array.isArray(btmList)" class="btoList">
      <div v-for="item in btmList" :key="item.path" :class="{ active: activeBtm === item.path }" class="buttomItem" @click="onClickBtm(item)">
        {{ item.name }}
        <el-popover
          placement="top"
          :width="200"
          trigger="hover"
          :disabled="(item.list || []).length === 0"
          popper-class="select-popover-content"
          @before-enter="onPopoverEnter(item)"
        >
          <template #reference>
            <span v-if="activeBtm === item.path && (item.list || []).length > 0" class="icon">
              <el-icon color="fff">
                <Tools />
              </el-icon>
            </span>
          </template>
          <el-checkbox-group v-if="activeBtm === item.path" v-model="checkList" @change="mapCheckChange">
            <el-checkbox v-for="(li, index) in item.list || []" :key="index" :label="li.name" :value="li.name" />
          </el-checkbox-group>
        </el-popover>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import CountySelect from '@/components/CountySelect.vue';
import useMapStore from '@/store/modules/map';
import dayjs from 'dayjs';
const mapStore = useMapStore();
let { proxy } = getCurrentInstance() as ComponentInternalInstance;
import { pageList } from '@/views/hbwlpc/data';
const route = useRoute();
const allList = ref({
  '产业赋能': {
    'cyfz': {
      'cyyq': [
        {
          'name': '产业园道路规划',
          'value': '产业园道路规划'
        },
        {
          'name': '产业园用地规划',
          'value': '产业园用地规划'
        }
      ],
      'gybj': [
        {
          'name': '工矿用地',
          'value': '工矿用地'
        }
      ],
      'nyfz': [
        {
          'name': '农业生产',
          'value': '农业生产'
        }
      ]
    }
  },
  '规划布局': {
    'zygh': {
      'zxgh': [
        {
          'name': '产业结构规划',
          'value': '产业结构规划'
        },
        {
          'name': '镇域交通规划',
          'value': '镇域交通规划'
        },
        {
          'name': '旅游体系规划',
          'value': '旅游体系规划'
        },
        {
          'name': '重大基础设施规划',
          'value': '重大基础设施规划'
        }
      ],
      'kjgh': [
        {
          'name': '规划造林绿化空间',
          'value': '规划造林绿化空间'
        },
        {
          'name': '历史文化保护线',
          'value': '历史文化保护线'
        },
        {
          'name': '用地用海规划分区',
          'value': '用地用海规划分区'
        }
      ],
      'sqsx': [
        {
          'name': '永久基本农田',
          'value': '永久基本农田'
        },
        {
          'name': '城市开发边界',
          'value': '城市开发边界'
        },
        {
          'name': '自然保护地',
          'value': '自然保护地'
        }
      ]
    },
    'zqgh': {
      'dlgh': [
        {
          'name': '道路中线',
          'value': '道路中线'
        },
        {
          'name': '道路红线',
          'value': '道路红线'
        },
        {
          'name': '道路侧石线',
          'value': '道路侧石线'
        }
      ],
      'gxgh': [
        {
          'name': '规划高压线',
          'value': '规划高压线'
        },
        {
          'name': '给水规划',
          'value': '给水规划'
        },
        {
          'name': '污水规划',
          'value': '污水规划'
        },
        {
          'name': '中压燃气规划',
          'value': '中压燃气规划'
        }
      ],
      'ydgh': [
        {
          'name': '规划用地',
          'value': '规划用地'
        },
        {
          'name': '项目用地',
          'value': '项目用地'
        }
      ]
    }
  },
  '资源禀赋': {
    'gdzy': {
      'gdjg': [
        {
          name: '补充耕地',
          value: '补充耕地'
        },
        {
          name: '不稳定耕地',
          value: '不稳定耕地'
        }
      ],
      'hbzy': [
        {
          name: '旱改水潜力',
          value: '旱改水潜力'
        },
        {
          name: '占补平衡潜力',
          value: '占补平衡潜力'
        }
      ]
    }
  },
  '民生保障': {
    'jcss': {
      'dxgx': [
        {
          name: '污水管网',
          value: '污水管网'
        },
        {
          name: '燃气管网',
          value: '燃气管网'
        }
      ]
    },
    'jtss': [
      {
        name: '汽车客运站',
        value: '汽车客运站'
      },
      {
        name: '公共停车场',
        value: '公共停车场'
      },
      {
        name: '公交车站',
        value: '公交车站'
      }
    ],
    'fwss': [
      {
        name: '充电站',
        value: '充电站'
      },
      {
        name: '公共厕所',
        value: '公共厕所'
      },
      {
        name: '加油站',
        value: '加油站'
      }
    ]
  }
});
const checkList = ref([]);

const activeNav = ref(mapStore.activeNav);
const activeBtm = ref(mapStore.activeBtm);
const title = computed(() => {
  return proxy.$route.meta.title;
});
const goHome = () => {
  proxy.$router.push('/index');
};
const onClickNav = (value) => {
  activeNav.value = value;
  checkList.value = [];
  mapStore.SactiveNav(value);
  initBtm();
};
const onClickBtm = (item) => {
  activeBtm.value = item.path;
  mapStore.SactiveBtm(item.path);
  // 设置默认选中
  let list = item.list || [];
  checkList.value = list.map((item) => item.name);
  mapCheckChange();
};
const btmList = computed(() => {
  return mapStore.btmList;
});
const navList = computed(() => {
  return mapStore.navList;
});
const iscountry = computed(() => {
  return mapStore.iscountry;
});
const isimg = computed(() => {
  return mapStore.isimg;
});
const issw = computed(() => {
  return mapStore.issw;
});
const isDate = computed(() => {
  return mapStore.isDate;
});
const isWeather = computed(() => {
  return mapStore.isWeather;
});
const isActiveNav = computed(() => {
  return mapStore.activeNav;
});
const getTime = computed(() => {
  const time = dayjs().format('YYYY年MM月DD日');
  return time;
});
const poplist = computed(() => {
  const title = proxy.$route.meta.title;
  const nav = activeNav.value;
  const btm = activeBtm.value;
  if (allList.value && allList.value[title] && allList.value[title][nav] && allList.value[title][nav][btm]) {
    return allList.value[title][nav][btm];
  } else {
    return [];
  }
});

// 展示的popover列表
const showPopoverList = ref([]);
const onPopoverEnter = (item) => {
  const title = proxy.$route.meta.title;
  const nav = activeNav.value;
  const btm = item.value;
  if (allList.value && allList.value[title] && allList.value[title][nav] && allList.value[title][nav][btm]) {
    showPopoverList.value = allList.value[title][nav][btm];
  } else {
    showPopoverList.value = [];
  }
};

const emits = defineEmits(['mapCheckChange']);

// 选中展示的地图图层
const mapCheckChange = () => {
  let list = btmList.value || [];
  let item = list.find((i) => i.path === activeBtm.value);
  emits('mapCheckChange', { checkList: checkList.value, item, page: proxy.$route.meta, activeNav: activeNav.value, activeBtm: activeBtm.value });
};

onMounted(async () => {
  initBtm();
});

// 如果不是从首页进入，而是直接进入页面，需要重新赋值底部按钮数据
const initBtm = () => {
  // mapStore.activeNav 在store中设置tabs时默认设置了第一个
  let item = proxy.$route;
  let page: any = pageList.find((i) => '/' + i.path === item.path) || { tabs: [] };
  let tabs: any = page.tabs || [];
  if (item.path && mapStore.activeNav) {
    let tab: any = tabs.find((i) => i.path === mapStore.activeNav) || {};
    let buttons = tab.buttons || [];
    mapStore.SetBtmList(buttons);
    if (buttons.length > 0) {
      activeBtm.value = buttons[0].path;
      mapStore.SactiveBtm(buttons[0].path);
      // 设置默认选中图层
      let list = buttons[0].list || [];
      checkList.value = list.map((item) => item.name);
      mapCheckChange();
    }
  } else {
    mapStore.SetBtmList([]);
  }
};

// watch(
//   () => btmList.value,
//   (val) => {
//     if (val) {
//       if (activeNav.value === 'zqgh') {
//         // 镇区规划默认选中用地规划
//         activeBtm.value = 'ydgh';
//       } else {
//         if (btmList.value[0]) {
//           activeBtm.value = btmList.value[0].name;
//         }
//       }
//     }
//   },
//   {
//     deep: true,
//     immediate: true
//   }
// );
// watch(
//   () => navList.value,
//   (val) => {
//     if (val) {
//       checkList.value = [];
//       if (isActiveNav.value) {
//         activeNav.value = isActiveNav.value;
//       } else {
//         if (navList.value[0]) {
//           activeNav.value = navList.value[0].value;
//         } else {
//           activeNav.value = '';
//         }
//       }
//     }
//   },
//   {
//     deep: true,
//     immediate: true
//   }
// );

const setBottomNavChecked = () => {
  try {
    if (allList.value[title.value] && allList.value[title.value][activeNav.value]) {
      let layerList = allList.value[title.value][activeNav.value][activeBtm.value];
      if (!layerList) return;
      // 激活的图层默认渲染
      checkList.value = layerList.map((item) => item.name);
      let activeItem = btmList.value.find((item) => {
        return item.value === activeBtm.value;
      });
      // mapCheckChange(activeItem);
    }
  } catch (e) {
    console.log(e);
  }
};

// watch(
//   () => activeBtm.value,
//   (val) => {
//     setBottomNavChecked();
//   },
//   {
//     immediate: true
//   }
// );
</script>
<style lang="scss" scoped>
.NavBar {
  width: 100%;
  height: 138px;
  display: flex;
  justify-content: space-between;
  overflow: hidden;
  position: absolute;
  left: 0;
  top: 0;
  color: white;
  z-index: 10;
  background: url('@/assets/common/上.png') no-repeat 0 0 / 100% 100%;

  .top {
    width: 100%;
    height: inherit;
    display: flex;
    justify-content: center;
    background: url('@/assets/common/左角.png') no-repeat 0 0 / contain;
  }

  .country {
    position: absolute;
    left: 68px;
    top: 42%;
    display: flex;
  }

  .date {
    position: absolute;
    left: 68px;
    top: 42%;
    display: flex;
    font-family: 'YouSheBiaoTiHei';
    font-size: 30px;
    text-shadow: 0px 2px 8px rgba(5, 28, 55, 0.42);
    background: linear-gradient(180deg, rgba(14, 197, 236, 1) 0%, rgba(49, 190, 255, 1) 0%, rgba(239, 252, 254, 1) 58.7646484375%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .img {
    position: absolute;
    left: 0px;
    top: 25px;
    display: flex;
  }
  .weather {
    position: absolute;
    right: 57px;
    top: 65px;
    font-family: 'YouSheBiaoTiHei';
    font-size: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-shadow: 0px 2px 8px rgba(5, 28, 55, 0.42);
    background: linear-gradient(180deg, rgba(14, 197, 236, 1) 0%, rgba(49, 190, 255, 1) 0%, rgba(239, 252, 254, 1) 58.7646484375%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .sw {
    position: absolute;
    right: 57px;
    cursor: pointer;
    top: 65px;
    width: 190px;
    height: 40px;
    display: flex;
    font-family: 'YouSheBiaoTiHei';
    font-size: 26px;
    color: #fff;
    justify-content: center;
    align-items: center;
    background: #0eadff;
    border: 1px solid #28bdff;
    background: url('@/assets/common/nav选中.png') no-repeat 0 0/100% 100%;
  }

  .bgborder {
    width: 100%;
    height: inherit;
    position: absolute;
    display: flex;
    justify-content: center;

    img {
      height: 144px;
    }

    // background: url('@/assets/common/topbg1.png') no-repeat 0 0 / contain;
    // background-position: center;
  }

  .nav {
    position: absolute;
    top: 60%;
    height: 20px;
    display: flex;

    .navItem {
      width: 172px;
      display: flex;
      font-family: 'YouSheBiaoTiHei';
      font-size: 26px;
      cursor: pointer;
      height: 30px;
      justify-content: center;
      align-items: center;

      &.active {
        background: url('@/assets/common/nav选中.png') no-repeat 0 0/100% 100%;
      }
    }
  }

  .title {
    // width: 100%;
    height: 60px;
    cursor: pointer;
    display: flex;
    font-family: 'YouSheBiaoTiHei';
    justify-content: center;
    align-items: center;
    position: absolute;
    z-index: 999;
    font-weight: 400;
    font-size: 46px;
    color: #ffffff;
    line-height: 14px;
    text-shadow: 0px 1px 2px rgba(17, 20, 22, 0.31);
    letter-spacing: 4px;
  }

  .btoList {
    width: 100%;
    position: fixed;
    display: flex;
    bottom: 54px;
    justify-content: center;

    .buttomItem {
      width: 134px;
      height: 35px;
      display: flex;
      cursor: pointer;
      font-family: 'YouSheBiaoTiHei';
      justify-content: center;
      font-size: 18px;
      align-items: center;
      background: url('@/assets/common/threenav.png') no-repeat 0 0/100% 100%;

      .icon {
        position: relative;
        top: -5px;
        right: -12px;
      }

      &.active {
        background: url('@/assets/common/threeac.png') no-repeat 0 0 / 100% 100%;
        background-size: cover;
      }
    }
  }
}
</style>
<style lang="scss">
.select-popover-content {
  background-color: rgba(20, 77, 93, 0.8) !important;
  border-color: #005579 !important;
}

.select-popover-content .el-checkbox__label {
  color: #5394b3 !important;
}

/* 根据el-popover的placement属性调整小三角形的样式 */
.select-popover-content .el-popper__arrow:before {
  background-color: rgba(20, 77, 93, 0.8) !important;
  border-color: #005579 !important;
  display: none;
}
</style>
